function DragEle(ele) {
    // {}
    // {}[[Prototype]] = DragEle.prototype;
    // this -> {}

    this.target = ele;

    this.init();

    // return this
}

// 正常版
DragEle.prototype.init = function () {  // obj.init()  => 初始化
    this.randColor();  // 函数内部默认调用randColor => 默认随机颜色
    this.dragStart();  // 函数内部默认调用dragSatr => 默认开拖拽
}
DragEle.prototype.dragStart = function () {  // 拖拽开始(按下 -> 记录按下的位置)  dragEle.dragStart
    // this -> dragEle  (外层函数)
    var _this = this; // 对象的复制属于浅复制 -> _this = dragEle
    this.target.onmousedown = function (e) {  // 内层函数 => 事件(this->绑定事件的元素 box)
        var e = e || window.event;
        var posX = e.offsetX;
        var posY = e.offsetY;
        console.log(posX, posY);

        // 把公有的属性都存储到根对象中 
        // 注意: 事件中的this指向绑定事件的元素 -> 直接使用this(指向box)
        // this.posX = posX;
        // this.posY = posY;
        // console.log(this);

        _this.posX = posX;
        _this.posY = posY;
        console.log(_this);

        // 按下时 在调用dragMove dragEnd => 绑定移动和松开事件
        _this.dragMove()
        _this.dragEnd()

    }
}
DragEle.prototype.dragMove = function () {
    // this -> dragEle
    // var _this = this;
    document.onmousemove = (e) => {  //箭头函数 (快速解决this指向混乱的问题 缺点: this不在指向绑定事件的元素)

        // 盒子跟随鼠标相对于按下的位置移动
        var x = e.pageX - this.posX;
        var y = e.pageY - this.posY;
        console.log(x, y);


        this.target.style.left = x + "px";
        this.target.style.top = y + "px";

    }
}
DragEle.prototype.dragEnd = function () {
    // this -> dragEle
    document.onmouseup = function () {
        document.onmousemove = null;
    }

}
DragEle.prototype.randColor = function () {
    var str = "0123456789abcdef";
    var colorStr = "#";
    for (var i = 0; i < 6; i++) {
        var index = Math.floor(Math.random() * 16); // 0-15的随机数 (下标)
        var char = str.charAt(index);
        colorStr += char;
    }
    // return colorStr;
    this.target.style.backgroundColor = colorStr;
}